<template>
  <div class="app-page">
    <el-table-form ref="form" :model="query">
      <el-form-item label="气瓶类型:" prop="cylinderTypeCode">
        <el-select
          v-model="query.cylinderTypeCode"
          filterable
          clearable
          placeholder="请选择"
          :filter-method="filterCylinderType"
          @clear="clearCylinderType"
          @focus="focusCylinderType"
        >
          <el-option
            v-for="(item, index) in cylinderTypeMap"
            :key="index"
            :label="item.dictShortName + '-' + item.dictName"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="状态:">
        <el-select v-model="query.status" filterable clearable placeholder="请选择">
          <el-option :value="1" label="启用" />
          <el-option :value="2" label="禁用" />
        </el-select>
      </el-form-item>
      <template v-slot:btns>
        <el-button v-permission="1" type="primary" icon="el-icon-search" @click="search">查询</el-button>
      </template>
    </el-table-form>
    <div style="margin-bottom: 10px;" class="btn-group">
      <div>
        <el-button v-permission="4" type="primary" icon="el-icon-plus" @click="add">气瓶设置</el-button>
      </div>
    </div>
    <lb-table
      ref="lbTable"
      v-loading="$loadingPlugin.fetchData"
      v-el-height-adaptive-table="{ bottomOffset: 10 }"
      border
      highlight-current-row
      element-loading-text="加载中"
      :column="tableData.column"
      :data="tableData.data"
      pagination
      :total="tableData.total"
      custom-column
      @fetch="fetchData"
    />
    <add ref="add" :cylinder-type-map="cylinderTypeMapCopy" />
  </div>
</template>

<script>
  import {
    queryGasCylinderDict, cylinderDictSwitch,
    cylinderDictionaryList
  } from '@/api'
  import Add from './components/Add'
  import { mapGetters } from 'vuex'
  import dayjs from 'dayjs'

  export default {
    name: 'cylinderSetting',
    components: {
      Add
    },
    data() {
      return {
        query: {
          cylinderTypeCode: '',
          status: ''
        },
        cylinderTypeMap: [], // 气瓶类型
        cylinderTypeMapCopy: [], // 气瓶类型 备份
        tableData: {
          total: 0,
          column: [
            {
              type: 'index'
            },
            {
              prop: 'year',
              label: '年份'
            },
            {
              prop: 'cylinderTypeCode',
              label: '气瓶类型',
              render: (h, { row }) => (<span>{row.dictShortName + '-' + row.dictName}</span>)
            },
            {
              prop: 'nonInspectionRecoveryPrice',
              label: '未超检回收单价'
            },
            {
              prop: 'exceedInspectionRecoveryPrice',
              label: '超检回收单价'
            },
            {
              prop: 'remark',
              label: '备注'
            },
            {
              prop: 'status',
              label: '状态',
              render: (h, { row }) => {
                if (row.status === 1) {
                  return <span class='themeColor'>启用</span>
                } else if (row.status === 2) {
                  return <span>停用</span>
                }
              }
            },
            {
              prop: 'modifyUser',
              label: '操作人'
            },
            {
              label: '操作时间',
              prop: 'modifyTime',
              width: 180,
              render: (h, { row }) => <span>{row.modifyTime && dayjs(row.modifyTime).format('YYYY-MM-DD HH:mm')}</span>
            },
            {
              label: '操作',
              width: 100,
              fixed: 'right',
              render: (h, { row }) => {
                return (
                <div>
                  <el-link size='mini' v-permission='2' underline={false} onClick={() => this.update(row)}>
                    编辑
                  </el-link>
                  <el-link size='mini' v-permission='3' underline={false} onClick={() => this.switch(row)}>
                    {row.status === 1 ? '停用' : '启用'}
                  </el-link>
                </div>
              )
              }
            }
          ],
          data: [
          ]
        }
      }
    },
    computed: {
      ...mapGetters([
        'orgList'
      ])
    },
    async created() {
      this.getCylinderTypeMap()
    },
    methods: {
      _getQuery(obj) {
        const query = {}
        for (const key in obj) {
          if (obj.hasOwnProperty(key)) {
            if (obj[key] !== '') {
              query[key] = obj[key]
            }
          }
        }
        return query
      },
      async fetchData({ currentPage, pageSize }) {
        const query = {
          ...this._getQuery(this.query),
          currentPage,
          pageSize
        }
        const res = await cylinderDictionaryList(query)
        this.tableData.data = res.data.rows
        if (currentPage === 1) this.tableData.total = res.data.total
      },
      async add() {
        await this.$refs.add.open()
        this.$refs.lbTable.fetch({ currentPage: 1 })
      },
      async update(row) {
        // 对年份进行处理
        row.year = String(row.year)
        await this.$refs.add.open(row)
        this.$refs.lbTable.fetch({ currentPage: 1 })
      },
      search() {
        this.$refs.lbTable.fetch({ currentPage: 1 })
      },
      switch(row) {
        // const title = row.activeFlag === 1 ? '停用' : '启用'
        this.$confirm(`确认要执行操作吗?`, '提示', {
          type: 'warning'
        }).then(() => {
          const loading = this.$message({
            message: '操作中...',
            duration: 0,
            iconClass: 'el-icon-loading'
          })
          cylinderDictSwitch({
            id: row.id,
            status: row.status === 1 ? 2 : 1
          }).then(() => {
            this.$refs.lbTable.fetch({ currentPage: 1 })
            this.$notify({
              title: '提示',
              message: `操作成功`,
              type: 'success',
              duration: 2000
            })
          }).finally(() => {
            loading.close()
          })
        })
      },
      getCylinderTypeLable(cylinderTypeCode) {
        if (!cylinderTypeCode) return ''
        const obj = this.cylinderTypeMap.find(it => it.value === cylinderTypeCode)
        return obj ? obj.label : ''
      },
      // 获取气瓶类型枚举
      async getCylinderTypeMap() {
        const { data } = await queryGasCylinderDict({ dictType: 1, activeFlag: 1 })
        this.cylinderTypeMap = data.map(it => ({ ...it, label: it.dictName, value: it.id }))
        this.cylinderTypeMapCopy = data.map(it => ({ ...it, label: it.dictName, value: it.id }))
      },
      // 过滤
      filterCylinderType(valueStr) {
        const dataList = [...this.cylinderTypeMapCopy]// 拷贝
        if (valueStr && valueStr.trim()) {
          this.cylinderTypeMap = dataList.filter(it => it.dictShortName.indexOf(valueStr) !== -1 || it.dictName.indexOf(valueStr) !== -1)
        } else {
          this.cylinderTypeMap = dataList
        }
      },
      clearCylinderType() {
        const dataList = [...this.cylinderTypeMapCopy]// 拷贝
        this.cylinderTypeMap = dataList
      },
      focusCylinderType() {
        const dataList = [...this.cylinderTypeMapCopy]// 拷贝
        this.cylinderTypeMap = dataList
      }

    }
  }
</script>

<style lang="scss" scoped>
.el-form-item .el-form-item {
  margin-bottom: 0;
}

.merge-item {
  /deep/ .el-form-item__content {
    display: flex;
  }
}

.btn-group {
  display: flex;
  justify-content: space-between;
}
</style>
